<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<TITLE>SpringDemo</TITLE>
		<META name="description" content="THORNBIRD.COM" />
		
		<!-- 引入外部js或css -->
		<script th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
		<!-- 引入内部js或css -->
		<script th:src="${'/lib/layui/layui.js'}" charset="utf-8"></script>
		<script th:src="${'/js/xadmin.js'}" type="text/javascript"></script>
		<link th:href="${'/css/font.css'}" rel="stylesheet">
		<link th:href="${'/css/xadmin.css'}" rel="stylesheet">
	</head>
<body>
	<div class="x-body">
		<form id="form1" class="layui-form">
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>姓名
				</label>
				<div class="layui-input-inline">
					<input type="text" id="username" name="userName" required=""
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>性别
				</label>
				<div class="layui-input-inline">
					<input name="userSex" checked="" type="radio" value="男"
						lay-skin="primary" title="男"> <input name="userSex"
						type="radio" value="女" lay-skin="primary" title="女">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="phone" class="layui-form-label"> <span
					class="x-red">*</span>手机
				</label>
				<div class="layui-input-inline">
					<input type="text" id="phone" name="userTelephone" required=""
						lay-verify="phone" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="phone" class="layui-form-label"> <span
					class="x-red">*</span>电子邮箱
				</label>
				<div class="layui-input-inline">
					<input type="text" name="userEmail" required="" lay-verify="email"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>家庭地址
				</label>
				<div class="layui-input-inline">
					<input type="text" name="userAddress" required=""
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>出生日期
				</label>
				<div class="layui-input-inline">
					<input type="text" id="date1" 
						name="userBirthday" required="" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>入职时间
				</label>
				<div class="layui-input-inline">
					<input type="text" id="date2" 
						name="userEntrytime" required="" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>学历
				</label>
				<div class="layui-input-inline">
					<select id="shipping" name="userDiploma" class="valid">
						<option value="大专">大专</option>
						<option value="本科">本科</option>
						<option value="硕士">硕士</option>
						<option value="博士">博士</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label">
					<span class="x-red">*</span>部门安排
				</label>
				<div class="layui-input-inline">
					<select name="departId" lay-filter="departSelect">
						<option th:each="depart:${departments}" 
							th:value="${depart.departId}" th:text="${depart.departName}"/>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>职位
				</label>
				<div class="layui-input-inline">
					<select name="positionId" lay-filter="positionSelect">
						<option th:each="position:${positions}" 
							th:value="${position.positionId}" th:text="${position.positionName}"/>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					指定角色
				</label>
				<div class="layui-input-block">
					<input type="checkbox" name="userRoles" lay-skin="primary" 
						th:each="role,status : ${roles}" 
						th:title="${role.roleDesc}" th:value="${role.roleId}">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_username" class="layui-form-label"> <span
					class="x-red">*</span>账号
				</label>
				<div class="layui-input-inline">
					<input type="text" id="account1" name="account"
						required="" onchange="onlyUser(this)" lay-verify="nikename"
						autocomplete="off" class="layui-input">
				</div>
				<div id="account" class="layui-form-mid layui-word-aux">
					至少3个字符</div>
			</div>
			<div class="layui-form-item">
				<label for="L_pass" class="layui-form-label"> <span
					class="x-red">*</span>密码
				</label>
				<div class="layui-input-inline">
					<input onchange="safePW()" type="password" id="L_pass"
						name="password2" required="" lay-verify="pass" autocomplete="off"
						class="layui-input">
				</div>
				<div id="password" class="layui-form-mid layui-word-aux ">
					至少6个字符</div>
			</div>
			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> <span
					class="x-red">*</span>确认密码
				</label>
				<div class="layui-input-inline">
					<input onchange="confirm()" type="password" id="L_repass"
						name="password" required="" lay-verify="repass" autocomplete="off"
						class="layui-input">
				</div>
				<div id="confire" class="layui-form-mid layui-word-aux ">
					两次密码必须一致</div>
			</div>

			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button class="layui-btn" lay-filter="add" lay-submit="">
					增加</button>
			</div>
		</form>
	</div>
</body>
<script>
	// 密码输入框事件
	function safePW(){
		if($('#L_pass').val().length>5){
			$("#password").html("<i class=\"layui-icon layui-anim layui-anim-scale \" style=\"color: #1E9FFF;\">&#xe618;</i>")
		}
	}
	
	//密码确认框事件
	function confirm(){
		if($('#L_pass').val()==$('#L_repass').val()){
                 $("#confire").html("<i class=\"layui-icon layui-anim layui-anim-scale \" style=\"color: #1E9FFF;\">&#xe618;</i>") 
               }
	}
	
	//layui监听器
	layui.use(['form','layer','laydate'], function(){
		$ = layui.jquery;
		var form = layui.form,
		layer = layui.layer,
		laydate=layui.laydate;
       	
		// 加载时间控件
		laydate.render({
			elem: '#date1',
    		trigger: 'click'
		});
		laydate.render({
			elem: '#date2',
    		trigger: 'click'
		});
		
		//页面输入框验证器
		form.verify({
			nikename: function(value){
				if(value.length < 2){
					return '至少得2个字符啊';
				}
			},
			pass: [/(.+){6,12}$/, '密码必须6到12位'],
			repass: function(value){
				if($('#L_pass').val()!=$('#L_repass').val()){
					return '两次密码不一致';
				}
			}
		});
		
		//form提交
		form.on('submit(add)', function(data){
            console.log(data);
            $.ajax({
        		url :"/account/addUser",
        		type : "POST",
        		data : $('#form1').serialize(),
        		dataType : "text",
        		success : function(data) {
        			var result = eval("(" + data + ")");
        			if (result.status == 200) {
						layer.msg("修改成功",{
							icon : 1,
							time: 500,
						},function () {
							//关闭弹出窗，刷新list页面
							var index = parent.layer.getFrameIndex(window.name);
							parent.location.reload();
							parent.layer.close(index);
						});
    				} else {
    					layer.msg(result.message, {icon: 0});
    				}
        		},
        		error : function() {
        			layer.msg('无法连接服务器', {icon: 2});
        		}
        	});   
            return false;
		});
		
		// select 变更事件，获取不同部门的职位列表
		form.on('select(departSelect)', function(data){
			$.ajax({
				url : "/organization/positionsByDepart?departId=" + $("[name=departId]").val(),
				type : "get",
				contentType: "application/json",
				success : function (data) {
					$("[name=positionId]").empty();
					$.each(data, function(i, item){
						$("[name=positionId]").append("<option value="+
								item.positionId+">"+item.positionName+"</option>");
					});
					form.render('select');
				},
				error : function (data) {
					layer.msg(data.message, {icon: 0});
				}
			});
		});
	});
</script>
</html>